<div class="map-com">
    <span class="sline"></span>
    <span class="text">查询数据</span>
</div>

<div class="clear">
    <nz-tree-select class=" first-input2 fm-input2" [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch
        nzPlaceHolder="请选择" [(ngModel)]="layerName" (ngModelChange)="clearAttribute();searchService.change();"
        [nzDropdownMatchSelectWidth]="true" [nzDropdownStyle]="{ 'max-height': '300px' }">
    </nz-tree-select>
</div>


<div class="map-com" *ngIf="layerName != null && layerName != ''">
    <span class="sline"></span>
    <span class="text">查询条件</span>
</div>

<div class="clear" *ngIf="layerName != null && layerName != ''">

    <!-- 桥梁查询 -->
    <nz-form-item class="item" *ngIf="layerName == 'zy_ldgx_2018_84'">
        <nz-select class="first-input1 fm-input2" [(ngModel)]="attribute['xiang:=']" name="cxiang"
            (nzOpenChange)="p_administrativeDic.loadTwo('440307')"
            (ngModelChange)="p_administrativeDic.clearTwo(attribute, 'cun:=')" [nzPlaceHolder]="'乡镇名'">
            <nz-option *ngFor="let option of p_administrativeDic.two" required [nzLabel]="option.display"
                [nzValue]="option.id">
            </nz-option>
            <nz-option *ngIf="p_administrativeDic.isLoading" nzDisabled nzCustomContent>
                <i nz-icon type="loading" class="loading-icon"></i>加载中...
            </nz-option>
        </nz-select>
        <nz-select class="first-input1 fm-input2" [(ngModel)]="attribute['cun:=']" name="ccun"
            (nzOpenChange)="p_administrativeDic.loadThree(attribute['xiang:='])" [nzPlaceHolder]="'行政村名'">
            <nz-option *ngFor="let option of p_administrativeDic.three" required [nzLabel]="option.display"
                [nzValue]="option.id">
            </nz-option>
            <nz-option *ngIf="p_administrativeDic.isLoading" nzDisabled nzCustomContent>
                <i nz-icon type="loading" class="loading-icon"></i>加载中...
            </nz-option>
        </nz-select>

        <input nz-input placeholder="林班" class="first-input1 fm-input2" [(ngModel)]="attribute['lin_ban']" />
        <input nz-input placeholder="小班" class="first-input1 fm-input2" [(ngModel)]="attribute['xiao_ban']" />

        <nz-select class="first-input1 fm-input2" [(ngModel)]="attribute['di_mao:=']"
            (nzOpenChange)="p_dimaoDic.load('0')" [nzPlaceHolder]="'地貌'">
            <nz-option *ngFor="let option of p_dimaoDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
            </nz-option>
            <nz-option *ngIf="p_dimaoDic.isLoading" nzDisabled nzCustomContent>
                <i nz-icon type="loading" class="loading-icon"></i>加载中...
            </nz-option>
        </nz-select>

    </nz-form-item>


    <nz-form-item class="item first-input2">
        <label nz-checkbox class="text" [(ngModel)]="inExtent" [ngModelOptions]="{standalone: true}">地图范围</label>
    </nz-form-item>

    <nz-form-item class="item  first-input2">
        <button nz-button nzType="default" class="form-button" [nzLoading]="searchService.resetIsLoading"
            (click)="clearAttribute();searchService.reset()">重置</button>
        <button nz-button [nzType]="'primary'" [nzLoading]="searchService.searchIsLoading" class="form-button"
            style="margin-left: 20px;" (click)="attributeSearch()">查询</button>
    </nz-form-item>
</div>

<div class="map-com">
    <span class="sline"></span>
    <span class="text">查询列表</span>
</div>

<div class="clear" *ngIf="searchService && searchService.ss">
    <div *ngFor="let r of searchService.pageList" class="map-search-item"
        (click)="reInitAttributeService();searchService.local(r);searchService.ss.info(r);"
        (mouseenter)="searchService.clickhHighlight(r);">

        <div *ngIf="layerName == 'zy_ldgx_2018_84'" class="map-search-title">
            林班: {{r.properties.lin_ban}}, 小班: {{r.properties.xiao_ban}}, 地貌: {{r.properties.di_mao}}
        </div>

        <div *ngIf="layerName == 'zy_ldgx_2018_84'" class="map-search-content">所在乡镇:
            {{r.properties.xian}}--{{r.properties.xiang}}--{{r.properties.cun}}</div>

        <div class="map-search-local">
            <span (click)="searchService.ss.localByCenter(r);"><i nz-icon type="environment"></i>定位</span>
            <nz-divider nzType="vertical"></nz-divider>
            <span><i nz-icon type="message"></i>详情</span>
        </div>
    </div>

    <nz-pagination [nzTotal]="searchService.ss.rowsCount" [(nzPageIndex)]="searchService.ss.pageIndex"
        [(nzPageSize)]="searchService.ss.pageSize" (nzPageIndexChange)="searchService.loadPage()" [nzSize]="'small'"
        [nzShowTotal]="totalTemplate" class="map-search-page">
    </nz-pagination>
    <ng-template #totalTemplate let-total>总 {{total}} 条</ng-template>
</div>

<!-- 属性查询动态弹窗 -->
<div [id]="paras.layerName+'-attribute-search'" style="display:none;">
    <table id="attribute-search-table-b" class="table-b">
        <tr *ngFor="let item of showFields">
            <td width="40%" class="table-b-title">{{item.aliasName}}:</td>
            <td width="60%">~[{{item.name}}]</td>
        </tr>
    </table>
</div>

